import styles from "./index.less"
import * as echarts from 'echarts';
import {useEffect, useRef, useState} from "react";
const Attack=()=>{
    const getLastWeekDates = () => {
        const today = new Date();
        const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        const dates = [];
        for (let i = 0; i < 7; i++) {
            const date = new Date(lastWeek.getTime() + i * 24 * 60 * 60 * 1000);
            dates.push(date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }));
        }
        return dates;
    };
    const AttRef = useRef(null)
    const [safeLine, setSafeLine] = useState(getLastWeekDates())
    useEffect(() => {
        const myChart = echarts.init(AttRef.current);
        let option;
        option = {
            xAxis: {
                type: 'category',
                data: safeLine,
                boundaryGap: false,
                axisLine: {
                    show: false
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    interval: 0,//使x轴文字显示全,
                    margin: 15
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                  show:false
                },
                splitLine: { //多条横线
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.3)",
                        type: [10, 10],
                        dashOffset: 5
                    }

                },
            },
            grid: {
                left: "6%",
                top: "10%",
                right: "6%",
                bottom: "32px"
            },
            series: [
                {
                    name: 'Line 1',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        width: 1,
                        color:'rgba(115, 247, 249, 1)'
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(115, 247, 249, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(115, 247, 249, 0)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [289, 112, 347, 235, 266, 147, 213]
                },
                {
                    name: 'Line 2',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                        color: '#E4FD21',
                        width: 1,
                        type: [10, 10],
                        dashOffset: 5
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.6,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(255, 187, 0, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(216, 216, 216, 0)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [277, 106, 345, 215, 239, 136, 208]
                },

            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    }, [])
    return(
        <div className={styles.container}>
            <div className={styles.attLine} ref={AttRef}></div>
        </div>
    )
}
export  default  Attack